<template>
  <el-select v-model="job" placeholder="请选择职业">
    <template #prefix>
      <el-image :src="getJob(job).iconUrl" class="icon"/>
    </template>
    <el-option
        v-for="[key, value] of jobNameMap"
        :key="key"
        :label="value"
        :value="key"
    >
      <Job :value="key"/>
    </el-option>
  </el-select>
</template>

<script lang="ts" setup>
import {JobName} from "@/data/constants/Constants";
import {computed} from "vue";
import {getJob} from "@/data/service/jobService";
import Job from '@/views/components/Job/index.vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const jobNameMap = new Map(JobName)

const job = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

</script>



<style scoped>
.icon{
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>